<template>
	<view class="car-rental-plan-container">
		<!-- 吸顶的车辆名称 -->
		<view class="sticky-car-title" :class="{ 'sticky-fixed': isTitleFixed }" @click="goBack">
			<view class="banner-spacer"></view>
			<view class="sticky-content">
				<uni-icons type="left" size="20" color="#333"></uni-icons>
				<text class="car-title-text">{{ carName }}</text>
			</view>
		</view>
		
		<!-- 背景图片区域 -->
		<view class="banner-container">
			<!-- 背景图片（模糊效果） -->
			<image class="banner-bg" :src="carImage" mode="aspectFill"></image>
			
			<!-- 内容区域 -->
			<view class="banner-content">
				<!-- 第一行：空白布局区域 -->
				<view class="banner-spacer"></view>
				
				<!-- 第二行：导航栏（白色版本） -->
				<view class="nav-bar">
					<view class="back-icon-wrapper" @click="goBack">
						<image class="back-icon" src="/static/images/icon_back_light@3x.png" mode="aspectFit"></image>
					</view>
					<image class="title-icon" src="/static/images/利行租买车白.png" mode="aspectFit"></image>
					<image class="tagline-icon" src="/static/images/无套路有保障白.png" mode="aspectFit"></image>
				</view>
				
				<!-- 第三行：车辆信息卡片 -->
				<view class="car-info-card">
					<!-- 第一行：车辆图片和基本信息 -->
					<view class="car-basic-info">
						<!-- 左侧车辆图片 -->
						<view class="car-image-container">
							<image 
								class="car-image" 
								:src="carImage" 
								mode="aspectFill"
								@click.stop="previewImage(carImage)"
							></image>
						</view>
						
						<!-- 右侧车辆信息 -->
						<view class="car-details">
							<!-- 第一行：品牌名·型号 -->
							<text class="car-brand-model">{{ carName }}</text>
							
							<!-- 第二行：灰色描述 -->
							<text class="car-description">{{ carDescription }}</text>
							
							<!-- 第三行：价格 -->
							<text class="car-price">{{ carPrice }}</text>
						</view>
					</view>
					
					<!-- 第二行：车辆规格参数 -->
					<view class="car-specs">
						<view class="spec-item">
							<text class="spec-value">400 km</text>
							<text class="spec-label">纯电续航</text>
						</view>
						<view class="spec-item">
							<text class="spec-value">暂无</text>
							<text class="spec-label">快充时长</text>
						</view>
						<view class="spec-item">
							<text class="spec-value">暂无</text>
							<text class="spec-label">慢充时长</text>
						</view>
						<view class="spec-item">
							<text class="spec-value">2665 mm</text>
							<text class="spec-label">轴距</text>
						</view>
						<view class="spec-item spec-item-last" @click="goToParameterConfig">
							<uni-icons type="settings-filled" size="30" color="#333"></uni-icons>
							<text class="spec-value">更多参数</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 租车卡片区域 -->
		<view class="car-cards-section">
			<!-- 标题区域（不吸顶） -->
			<view class="section-header">
				<text class="section-title">租车方案</text>
			</view>
			
			<!-- 吸顶筛选栏区域 -->
			<view class="sticky-filter-container" :class="{ 'sticky-filter-fixed': isFilterFixed, 'sticky-filter-active': showPriceDropdown }">
				<!-- 筛选栏 -->
				<view class="filter-bar">
					<view class="filter-item" @click="togglePriceDropdown">
						<text class="filter-text" :class="{ 'active-filter': showPriceDropdown || selectedPrice }">{{ getPriceSortText() }}</text>
						<text class="filter-arrow">▼</text>
					</view>
					<view class="filter-item" @click="toggleRentalPeriodDropdown">
						<text class="filter-text" :class="{ 'active-filter': showRentalPeriodDropdown || selectedRentalPeriods.length > 0 }">{{ getRentalPeriodText() }}</text>
						<text class="filter-arrow">▼</text>
					</view>
					<view class="filter-item" @click="toggleCarAgeDropdown">
						<text class="filter-text" :class="{ 'active-filter': showCarAgeDropdown || selectedCarAges.length > 0 }">{{ getCarAgeText() }}</text>
						<text class="filter-arrow">▼</text>
					</view>
					<view class="filter-item" @click="toggleMonthlyRentDropdown">
						<text class="filter-text" :class="{ 'active-filter': showMonthlyRentDropdown || selectedMonthlyRent }">{{ getMonthlyRentText() }}</text>
						<text class="filter-arrow">▼</text>
					</view>
				</view>
				
				<!-- 价格排序选项 -->
				<view class="price-options" v-if="showPriceDropdown">
					<view 
						class="price-option" 
						:class="{ 'active': selectedPrice === 'lowest' }"
						@click="selectPrice('lowest')"
					>价格最低</view>
					<view 
						class="price-option" 
						:class="{ 'active': selectedPrice === 'highest' }"
						@click="selectPrice('highest')"
					>价格最高</view>
				</view>
				
		<!-- 租期选择选项 -->
		<view class="rental-period-options" v-if="showRentalPeriodDropdown">
			<view class="rental-period-grid">
				<view 
					v-for="(period, index) in rentalPeriodList" 
					:key="period.id"
					class="rental-period-item"
					:class="{ 'rental-period-selected': isPeriodSelected(period.value) }"
					@click="togglePeriodInDropdown(period.value)"
				>
					<text class="rental-period-name">{{ period.name }}</text>
				</view>
				<!-- 如果是奇数个，添加空白元素 -->
				<view v-if="rentalPeriodList.length % 4 >= 1" class="rental-period-item rental-period-empty"></view>
				<view v-if="rentalPeriodList.length % 4 >= 2" class="rental-period-item rental-period-empty"></view>
				<view v-if="rentalPeriodList.length % 4 >= 3" class="rental-period-item rental-period-empty"></view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="rental-period-buttons">
				<view class="reset-btn" @click="resetRentalPeriods">重置</view>
				<view class="confirm-btn" @click="confirmRentalPeriods">
					确定{{ selectedRentalPeriods.length > 0 ? `(${selectedRentalPeriods.length})` : '' }}
				</view>
			</view>
		</view>
		
		<!-- 月租选择选项 -->
		<view class="monthly-rent-options" v-if="showMonthlyRentDropdown">
			<view class="monthly-rent-grid">
				<view 
					v-for="(rent, index) in monthlyRentList" 
					:key="rent.id"
					class="monthly-rent-item"
					:class="{ 'monthly-rent-selected': selectedMonthlyRent === rent.id }"
					@click="selectMonthlyRent(rent.id)"
				>
					<text class="monthly-rent-name">{{ rent.name }}</text>
				</view>
			</view>
		</view>
		
		<!-- 车龄选择选项 -->
		<view class="car-age-options" v-if="showCarAgeDropdown">
			<view class="car-age-grid">
				<view 
					v-for="(age, index) in carAgeList" 
					:key="age.id"
					class="car-age-item"
					:class="{ 'car-age-selected': selectedCarAges.includes(age.id) }"
					@click="toggleCarAgeInDropdown(age.id)"
				>
					<text class="car-age-name">{{ age.name }}</text>
				</view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="car-age-buttons">
				<view class="reset-btn" @click="resetCarAges">重置</view>
				<view class="confirm-btn" @click="confirmCarAges">
					确定{{ selectedCarAges.length > 0 ? `(${selectedCarAges.length})` : '' }}
				</view>
			</view>
		</view>
			</view>
			
		<!-- 吸顶占位元素 -->
		<view class="sticky-filter-placeholder" v-if="isFilterFixed"></view>
			
		<!-- 租期选项标签（不吸顶） -->
		<view class="rental-period-tags" :class="{ 'rental-period-tags-masked': showPriceDropdown || showRentalPeriodDropdown || showMonthlyRentDropdown || showCarAgeDropdown }">
			<view 
				v-for="period in getTagPeriods()" 
				:key="period.value"
				class="tag-item" 
				:class="{ 'tag-item-selected': isPeriodSelected(period.value) }"
				@click="togglePeriod(period.value)"
			>{{ period.name }}</view>
		</view>
			
		<!-- 租车方案卡片列表 -->
		<view class="rental-cards-list" :class="{ 'rental-cards-masked': showPriceDropdown || showRentalPeriodDropdown || showMonthlyRentDropdown || showCarAgeDropdown }" @click="(showPriceDropdown || showRentalPeriodDropdown || showMonthlyRentDropdown || showCarAgeDropdown) ? (showPriceDropdown ? togglePriceDropdown() : showRentalPeriodDropdown ? toggleRentalPeriodDropdown() : showMonthlyRentDropdown ? toggleMonthlyRentDropdown() : toggleCarAgeDropdown()) : null">
				<view class="rental-card" v-for="(item, index) in rentalCards" :key="index">
					<!-- 卡片头部：公司信息 -->
					<view class="card-header" @click="goToStoreDetail(item)">
						<uni-icons type="shop" size="20" color="#333"></uni-icons>
						<text class="company-name">{{ item.companyName }}</text>
						<uni-icons type="forward" size="16" color="#999"></uni-icons>
					</view>
					
					<!-- 内部价格卡片 -->
					<view class="price-card">
						<!-- 价格信息区域 -->
						<view class="price-info-section">
							<!-- 第一行：租期、车龄、总额、月租 -->
							<view class="price-row">
								<view class="price-item">
									<text class="price-value">{{ item.rentalPeriod }}</text>
									<text class="price-label">租期</text>
								</view>
								<view class="price-item">
									<text class="price-value">{{ item.vehicleAge }}</text>
									<text class="price-label">车龄(年)</text>
								</view>
								<view class="price-item">
									<text class="price-value">{{ item.totalDeposit }}</text>
									<text class="price-label">总额</text>
								</view>
								<view class="price-item">
									<text class="price-value monthly-rent">{{ item.monthlyRent }}</text>
									<text class="price-label">月租</text>
								</view>
							</view>
							
							<!-- 第二行：押金分期标签 -->
							<view class="deposit-tag-row">
								<view class="deposit-tag" v-if="item.showDepositTag">押金分期</view>
							</view>
						</view>
						
						<!-- 免责声明 -->
						<text class="disclaimer">价格仅供参考,实际成交价格以和商家协商为准</text>
					</view>
					
					<!-- 更多方案行 -->
					<view class="more-plans-row" v-if="item.hasMorePlans" @click="showDepositPlanModal">
						<text class="more-plans-text">更多方案</text>
						<uni-icons type="right" size="16" color="#666"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 优惠信息提示区域 -->
		 <!--
		<view class="discount-info-container" v-if="showDiscountInfo && !showDepositModal && !showConsultModal">
			<view class="discount-info-content">
				<uni-icons type="closeempty" size="20" color="#999" @click="hideDiscountInfo"></uni-icons>
				<view class="discount-center">
					<image class="avatar-image" src="/static/images/img_avatar@3x.png" mode="aspectFit" @click="showConsultPopup"></image>
					<text class="discount-text">获取车辆的优惠信息</text>
				</view>
				<view class="discount-button" @click="showConsultPopup">
					<text class="discount-button-text">优惠咨询</text>
				</view>
			</view>
		</view>
		-->
		<!-- 固定底部按钮区域 -->
		<view class="bottom-button-container" v-if="!showDepositModal && !showConsultModal">
			<view class="consult-button" @click="showConsultPopup">
				<text class="button-text">咨询租金优惠</text>
			</view>
		</view>
		
		<!-- 押金分期方案弹框 -->
		<uni-popup ref="depositPlanPopup" type="bottom" :mask-click="false" :z-index="2000">
			<view class="deposit-plan-modal">
				<!-- 弹框头部 -->
				<view class="modal-header">
					<text class="modal-title">押金分期方案</text>
					<uni-icons type="closeempty" size="20" color="#999" @click="closeDepositPlanModal"></uni-icons>
				</view>
				
				<!-- 弹框内容 -->
				<view class="modal-content">
					<!-- 第二行：灰字 -->
					<text class="modal-description">非首次支付的押金后续将在每租期内通过余额扣款方式缴纳，直至当期押金账单支付完成。司机也可选择通过微信、支付宝等线上支付方式主动支付，已支付押金将在还车后退还。</text>
					
					<!-- 第三行：内卡片 -->
					<view class="payment-card">
						<!-- 背景竖线 -->
						<view class="background-line"></view>
						
						<view 
							v-for="(payment, index) in depositPayments" 
							:key="index"
							class="payment-item"
						>
							<!-- 第一行：点和文字 -->
							<view class="payment-row">
								<view class="icon-wrapper">
									<uni-icons 
										:type="index === 0 ? 'circle-filled' : 'smallcircle-filled'" 
										:size="index === 0 ? 18 : 12" 
										:color="index === 0 ? '#e66c1e' : '#ccc'"
									></uni-icons>
								</view>
								<text class="payment-label">{{ payment.label }}</text>
								<text class="payment-amount">{{ payment.amount }}</text>
							</view>
							
							<!-- 第二行：连接线 -->
							 <!--
							<view v-if="index < depositPayments.length - 1" class="connection-line"></view>
							-->
						</view>
					</view>
				</view>
				
				<!-- 弹框底部按钮 -->
				<view class="modal-footer">
					<view class="modal-button" @click="closeDepositPlanModal">
						<text class="modal-button-text">我知道了</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 咨询弹框 -->
		<uni-popup ref="consultPopup" type="bottom" :mask-click="true" :z-index="2000" @maskClick="closeConsultPopup">
			<view class="consult-modal">
				<!-- 第一行：顾问信息 -->
				<view class="consult-header">
					<view class="consult-info">
						<text class="consult-title">利行租车顾问为您服务</text>
						<view class="service-features">
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">1对1答疑</text>
							</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">车型推荐</text>
							</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">优惠咨询</text>
							</view>
						</view>
					</view>
					<image class="consult-avatar" src="https://app-1306761403.cos.accelerate.myqcloud.com/06d400f0-3875-43a6-b8f9-3664a0e45f6b.png" mode="aspectFit"></image>
				</view>
				
				<!-- 第二行：输入卡片 -->
				<view class="consult-form-card">
					<!-- 手机号输入 -->
					<view class="phone-input-row">
						<text class="input-label">您的手机号</text>
						<view class="input-wrapper">
							<input class="phone-input" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
							<uni-icons v-if="phoneNumber" type="closeempty" size="20" color="#999" @click="clearPhoneNumber"></uni-icons>
						</view>
					</view>
					
					<!-- 隐私说明 -->
					<text class="privacy-text">
						为了您的信息安全，手机号将以虚拟号的形式给到管家，详细规则查看
						<text class="privacy-link">《电话销售说明》</text>
					</text>
					
					<!-- 立即咨询按钮 -->
					<view class="consult-submit-button" @click="submitConsult">
						<text class="submit-button-text">立即咨询</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getRentalPlans, addPotentialClient } from '@/api/carInfo.js';

export default {
	name: 'CarRentalPlan',
	data() {
		return {
			carId: '2', // 默认车辆ID
			carName: '品牌名·型号', // 车辆名称
			carImage: '/static/images/car-placeholder.jpg', // 车辆图片
			carDescription: '2019款 Ei5网约版纯电动', // 车辆描述
			carPrice: '4680元/月起', // 车辆价格
			isTitleFixed: false,
			isFilterFixed: false,
				showPriceDropdown: false,
				selectedPrice: null,
			showRentalPeriodDropdown: false,
			selectedRentalPeriods: [],
			rentalPeriodList: [
				{ id: 1, name: '3期', value: 3 },
				{ id: 2, name: '4期', value: 4 },
				{ id: 3, name: '5期', value: 5 },
				{ id: 4, name: '6期', value: 6 },
				{ id: 5, name: '7期', value: 7 },
				{ id: 6, name: '8期', value: 8 },
				{ id: 7, name: '9期', value: 9 },
				{ id: 8, name: '10期', value: 10 },
				{ id: 9, name: '11期', value: 11 },
				{ id: 10, name: '12期', value: 12 }
			],
			showMonthlyRentDropdown: false,
			selectedMonthlyRent: null,
			monthlyRentList: [
				{ id: 1, name: '3000以下' },
				{ id: 2, name: '3000-3500' },
				{ id: 3, name: '3500-4000' },
				{ id: 4, name: '4000以上' }
			],
			showCarAgeDropdown: false,
			selectedCarAges: [],
			carAgeList: [
				{ id: 1, name: '0~0.5年' },
				{ id: 2, name: '0~3年' },
				{ id: 3, name: '3~5年' },
				{ id: 4, name: '5年以上' }
			],
				showDiscountInfo: true,
				showDepositModal: false,
				showConsultModal: false,
				phoneNumber: '',
			depositPayments: [
				{
					label: '首次支付',
					amount: '¥6000'
				},
				{
					label: '第1期租期内支付',
					amount: '¥1000'
				},
				{
					label: '第2期租期内支付',
					amount: '¥1000'
				},
				{
					label: '第3期租期内支付',
					amount: '¥1000'
				}
			],
			rentalCards: [
				{
					merchantId: '197',
					companyName: '上海妙玛汽车租赁有限公司',
					rentalPeriod: '3',
					vehicleAge: '0.5~3年',
					initialDeposit: '¥4000',
					totalDeposit: '¥5000',
					monthlyRent: '¥4680',
					showDepositTag: true,
					hasMorePlans: true
				},
				{
					merchantId: '198',
					companyName: '北京优车租赁有限公司',
					rentalPeriod: '6',
					vehicleAge: '1~2年',
					initialDeposit: '¥3500',
					totalDeposit: '¥4500',
					monthlyRent: '¥4200',
					showDepositTag: false,
					hasMorePlans: false
				},
				{
					merchantId: '199',
					companyName: '深圳快车租赁有限公司',
					rentalPeriod: '12',
					vehicleAge: '0.5~1年',
					initialDeposit: '¥5000',
					totalDeposit: '¥6000',
					monthlyRent: '¥3800',
					showDepositTag: false,
					hasMorePlans: true
				},
				{
					merchantId: '200',
					companyName: '广州顺风租赁有限公司',
					rentalPeriod: '3',
					vehicleAge: '2~3年',
					initialDeposit: '¥3000',
					totalDeposit: '¥4000',
					monthlyRent: '¥4500',
					showDepositTag: false,
					hasMorePlans: false
				},
				{
					merchantId: '201',
					companyName: '杭州绿能租赁有限公司',
					rentalPeriod: '6',
					vehicleAge: '1~2年',
					initialDeposit: '¥4000',
					totalDeposit: '¥5000',
					monthlyRent: '¥4100',
					showDepositTag: false,
					hasMorePlans: true
				}
			]
		}
	},
	onLoad(options) {
		console.log('car-rental-plan onLoad 被调用了', options);
		
		// 检查是否从 store-detail 页面跳转过来
		if (options.fromStoreDetail === 'true') {
			console.log('从 store-detail 页面跳转过来，使用传递的车辆数据');
			// 使用传递的车辆数据更新页面信息
			if (options.carId) {
				this.carId = options.carId;
			}
			if (options.carName) {
				this.carName = decodeURIComponent(options.carName);
			}
			if (options.carImage) {
				this.carImage = decodeURIComponent(options.carImage);
			}
			if (options.carDescription) {
				this.carDescription = decodeURIComponent(options.carDescription);
			}
			if (options.carPrice) {
				this.carPrice = decodeURIComponent(options.carPrice);
			}
			// 根据传递的车辆信息进行查询
			this.fetchRentalPlansByCarInfo();
		} else {
			console.log('正常进入页面，使用原有逻辑');
			// 保存车辆ID参数
			if (options.carId) {
				this.carId = options.carId;
			}
			// 保存车辆名称参数
			if (options.carName) {
				this.carName = decodeURIComponent(options.carName);
			}
			// 保存车辆图片参数（如果有的话）
			if (options.carImage) {
				this.carImage = decodeURIComponent(options.carImage);
			}
			// 保存车辆描述参数（如果有的话）
			if (options.carDescription) {
				this.carDescription = decodeURIComponent(options.carDescription);
			}
			// 保存车辆价格参数（如果有的话）
			if (options.carPrice) {
				this.carPrice = decodeURIComponent(options.carPrice);
			}
			// 页面加载时调用接口
			this.fetchRentalPlans();
		}
	},
	onShow() {
		console.log('car-rental-plan onShow 被调用了');
		// 页面显示时也调用接口
		this.fetchRentalPlans();
	},
	onPageScroll(e) {
		// 当滚动超过nav-bar时，显示吸顶标题
		if (e.scrollTop > 100) {
			this.isTitleFixed = true;
		} else {
			this.isTitleFixed = false;
		}
		
		// 当滚动超过筛选栏位置时，显示吸顶筛选栏
		pages/driver-life/car-rental-plan		// 使用更稳定的判断逻辑，避免循环
		const shouldBeFixed = e.scrollTop > 300;
		if (this.isFilterFixed !== shouldBeFixed) {
			this.isFilterFixed = shouldBeFixed;
		}
	},
	methods: {
		// 预览图片
		previewImage(imageUrl) {
			if (!imageUrl) {
				uni.showToast({
					title: '暂无图片',
					icon: 'none'
				});
				return;
			}
			
			uni.previewImage({
				urls: [imageUrl],
				current: imageUrl
			});
		},
		
		// 获取租车方案列表
		fetchRentalPlans() {
			console.log('fetchRentalPlans 方法被调用了');
			
			const params = {
				carId: this.getCarId(),
				terms: this.getSelectedTerms(),
				carAgeRanges: this.getSelectedCarAgeRanges(),
				minRent: this.getMinRent(),
				maxRent: this.getMaxRent(),
				rentSort: this.getRentSort(),
				page: '1',
				rows: '10'
			};
			
			console.log('调用租车方案接口参数:', params);
			
			getRentalPlans(params).then(res => {
				console.log('租车方案接口返回数据:', res);
				
				// 处理接口返回的数据
				if (res && res.data && res.data.records) {
					this.rentalCards = res.data.records.map(item => {
						// 格式化金额显示
						const formatAmount = (amount) => {
							if (amount === null || amount === undefined || amount === 0) {
								return '¥0';
							}
							return '¥' + amount.toString();
						};
						
						// 格式化车龄范围
						const formatCarAgeRange = (carAgeRange) => {
							if (!carAgeRange || carAgeRange === 'String') {
								return '0.5~3年';
							}
							// 如果已经是正确的格式，直接返回
							if (carAgeRange.includes('年')) {
								return carAgeRange;
							}
							// 如果只是数字范围，添加"年"字
							return carAgeRange + '年';
						};
						
						// 判断是否显示押金分期标签
						const showDepositTag = item.firstDeposit > 0 && item.totalDeposit > item.firstDeposit;
						
						return {
							planId: item.planId,
							carId: item.carId,
							merchantId: item.merchantId,
							companyName: item.merchantInfo ? item.merchantInfo.enterpriseName : '未知公司',
							rentalPeriod: item.term ? item.term.toString() : '3',
							vehicleAge: formatCarAgeRange(item.carAgeRange),
							initialDeposit: formatAmount(item.firstDeposit),
							totalDeposit: formatAmount(item.totalDeposit),
							monthlyRent: formatAmount(item.monthlyRent),
							showDepositTag: showDepositTag,
							hasMorePlans: false // 暂时设为false，后续可根据实际需求调整
						};
					});
					console.log('处理后的租车方案列表:', this.rentalCards);
				} else {
					console.log('租车方案接口返回数据格式异常:', res);
					// 保持原有假数据作为默认值
				}
			}).catch(error => {
				console.error('获取租车方案失败:', error);
				// 保持原有假数据作为默认值
			});
		},
		
		// 根据传递的车辆信息获取租车方案列表
		fetchRentalPlansByCarInfo() {
			console.log('fetchRentalPlansByCarInfo 方法被调用了');
			console.log('车辆信息:', {
				carId: this.carId,
				carName: this.carName,
				carImage: this.carImage,
				carDescription: this.carDescription,
				carPrice: this.carPrice
			});
			
			// 根据车辆信息进行查询
			const params = {
				carId: this.carId,
				terms: this.getSelectedTerms(),
				carAgeRanges: this.getSelectedCarAgeRanges(),
				minRent: this.getMinRent(),
				maxRent: this.getMaxRent(),
				rentSort: this.getRentSort(),
				page: '1',
				rows: '10'
			};
			
			console.log('调用租车方案接口参数:', params);
			
			getRentalPlans(params).then(res => {
				console.log('租车方案接口返回数据:', res);
				
				// 处理接口返回的数据
				if (res && res.data && res.data.records) {
					this.rentalCards = res.data.records.map(item => {
						// 格式化金额显示
						const formatAmount = (amount) => {
							if (amount === null || amount === undefined || amount === 0) {
								return '¥0';
							}
							return '¥' + amount.toString();
						};
						
						return {
							merchantId: item.merchantId || '',
							companyName: item.companyName || '未知公司',
							rentalPeriod: item.terms || '',
							vehicleAge: item.carAgeRange || '',
							initialDeposit: formatAmount(item.initialDeposit),
							totalDeposit: formatAmount(item.totalDeposit),
							monthlyRent: formatAmount(item.monthlyRent),
							showDepositTag: item.showDepositTag || false,
							hasMorePlans: item.hasMorePlans || false
						};
					});
				}
			}).catch(error => {
				console.error('获取租车方案失败:', error);
				// 保持原有假数据作为默认值
			});
		},
		
		// 获取车辆ID（从路由参数或默认值）
		getCarId() {
			return this.carId;
		},
		
		// 获取选中的期数
		getSelectedTerms() {
			if (this.selectedRentalPeriods.length === 0) {
				return '';
			}
			// 直接返回期数数组，因为selectedRentalPeriods现在存储的是期数
			return this.selectedRentalPeriods.join(',');
		},
		
		// 获取选中的车龄范围
		getSelectedCarAgeRanges() {
			if (this.selectedCarAges.length === 0) {
				return ''; // 默认为空，表示不限车龄
			}
			return this.selectedCarAges.map(id => {
				const age = this.carAgeList.find(a => a.id === id);
				return age ? age.name : '';
			}).join(',');
		},
		
		// 获取最小租金
		getMinRent() {
			if (!this.selectedMonthlyRent) {
				return ''; // 默认为空，表示不限最小租金
			}
			
			const rent = this.monthlyRentList.find(r => r.id === this.selectedMonthlyRent);
			if (!rent) {
				return '';
			}
			
			if (rent.name === '3000以下') {
				return ''; // 3000以下不设置最小值
			} else if (rent.name === '3000-3500') {
				return '3000';
			} else if (rent.name === '3500-4000') {
				return '3500';
			} else if (rent.name === '4000以上') {
				return '4000';
			}
			
			return '';
		},
		
		// 获取最大租金
		getMaxRent() {
			if (!this.selectedMonthlyRent) {
				return ''; // 默认为空，表示不限最大租金
			}
			
			const rent = this.monthlyRentList.find(r => r.id === this.selectedMonthlyRent);
			if (!rent) {
				return '';
			}
			
			if (rent.name === '3000以下') {
				return '3000';
			} else if (rent.name === '3000-3500') {
				return '3500';
			} else if (rent.name === '3500-4000') {
				return '4000';
			} else if (rent.name === '4000以上') {
				return ''; // 4000以上不设置最大值
			}
			
			return '';
		},
		
		// 获取租金排序
		getRentSort() {
			if (this.selectedPrice === 'lowest') {
				return 'asc';
			} else if (this.selectedPrice === 'highest') {
				return 'desc';
			}
			return 'desc'; // 默认降序
		},
		
		hideDiscountInfo() {
			this.showDiscountInfo = false;
		},
		goBack() {
			uni.navigateBack();
		},
		
		// 跳转到参数配置页面
		goToParameterConfig() {
			uni.navigateTo({
				url: `/pages/driver-life/parameter-config?carId=${this.carId}`
			});
		},
		
		// 跳转到门店详情页面
		goToStoreDetail(item) {
			// 从接口数据中获取商家信息
			const companyName = item.companyName || '未知公司';
			const companyAddress = '上海市浦东新区张江高科技园区'; // 暂时使用默认地址
			const companyImage = '/static/images/company-placeholder.jpg'; // 暂时使用默认图片
			const merchantId = item.merchantId || '197'; // 使用传递的merchantId或默认值
			
			uni.navigateTo({
				url: `/pages/driver-life/store-detail?merchantId=${merchantId}&companyName=${encodeURIComponent(companyName)}&companyAddress=${encodeURIComponent(companyAddress)}&companyImage=${encodeURIComponent(companyImage)}`
			});
		},
		showDepositPlanModal() {
			this.showDepositModal = true;
			this.$refs.depositPlanPopup.open();
		},
		closeDepositPlanModal() {
			this.showDepositModal = false;
			this.$refs.depositPlanPopup.close();
		},
		
		// 显示咨询弹框
		showConsultPopup() {
			this.showConsultModal = true;
			this.$refs.consultPopup.open();
		},
		
		// 关闭咨询弹框
		closeConsultPopup() {
			this.showConsultModal = false;
			this.$refs.consultPopup.close();
		},
		
		// 清空手机号
		clearPhoneNumber() {
			this.phoneNumber = '';
		},
		
		// 提交咨询
		submitConsult() {
			if (!this.phoneNumber) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			
			// 验证手机号格式
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.phoneNumber)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			// 构建提交数据
			const submitData = {
				phoneNumber: this.phoneNumber,
				carModel: this.carName // 使用当前车辆名称作为意向车型
			};
			
			console.log('提交咨询数据:', submitData);
			
			// 调用接口
			addPotentialClient(submitData).then(res => {
				console.log('提交咨询接口返回:', res);
				
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				
				// 清空手机号并关闭弹框
				this.phoneNumber = '';
				this.closeConsultPopup();
			}).catch(error => {
				console.error('提交咨询失败:', error);
				uni.showToast({
					title: '提交失败，请重试',
					icon: 'none'
				});
			});
		},
		
		// 关闭所有下拉菜单
		closeAllDropdowns() {
			this.showPriceDropdown = false;
			this.showRentalPeriodDropdown = false;
			this.showMonthlyRentDropdown = false;
			this.showCarAgeDropdown = false;
		},
		
		// 切换价格下拉菜单显示状态
		togglePriceDropdown() {
			// 先关闭所有其他下拉菜单
			this.closeAllDropdowns();
			
			// 然后切换当前下拉菜单
			this.showPriceDropdown = !this.showPriceDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showPriceDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 选择价格排序（单选替换）
		selectPrice(priceType) {
			this.selectedPrice = priceType;
			this.showPriceDropdown = false;
			// 调用接口
			this.fetchRentalPlans();
			console.log('选中的价格排序:', priceType);
		},
		
		// 获取价格排序显示文本
		getPriceSortText() {
			if (this.selectedPrice === 'lowest') {
				return '价格最低';
			} else if (this.selectedPrice === 'highest') {
				return '价格最高';
			}
			return '价格排序';
		},
		
		// 滚动到显示下拉菜单的位置
		scrollToShowDropdown() {
			// 获取当前滚动位置
			uni.createSelectorQuery().selectViewport().scrollOffset((res) => {
				const currentScrollTop = res.scrollTop;
				// 使用代码中定义的吸顶触发高度：280rpx
				const targetScrollTop = 280;
				
				// 如果当前滚动位置小于目标位置，则滚动到目标位置
				if (currentScrollTop < targetScrollTop) {
					uni.pageScrollTo({
						scrollTop: targetScrollTop,
						duration: 300
					});
				}
			}).exec();
		},
		
		// 切换租期下拉菜单显示状态
		toggleRentalPeriodDropdown() {
			// 先关闭所有其他下拉菜单
			this.closeAllDropdowns();
			
			// 然后切换当前下拉菜单
			this.showRentalPeriodDropdown = !this.showRentalPeriodDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showRentalPeriodDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 获取标签显示的期数列表（只显示3期、6期、12期）
		getTagPeriods() {
			return this.rentalPeriodList.filter(period => [3, 6, 12].includes(period.value));
		},
		
		// 统一的期数选择/取消选择方法
		togglePeriod(periodValue) {
			const index = this.selectedRentalPeriods.indexOf(periodValue);
			if (index > -1) {
				this.selectedRentalPeriods.splice(index, 1);
				console.log('取消选择期数:', periodValue, '当前选中:', this.selectedRentalPeriods);
			} else {
				this.selectedRentalPeriods.push(periodValue);
				console.log('选择期数:', periodValue, '当前选中:', this.selectedRentalPeriods);
			}
			// 调用接口更新数据
			this.fetchRentalPlans();
		},
		
		// 下拉菜单中的期数选择/取消选择方法（不立即调用接口）
		togglePeriodInDropdown(periodValue) {
			const index = this.selectedRentalPeriods.indexOf(periodValue);
			if (index > -1) {
				this.selectedRentalPeriods.splice(index, 1);
				console.log('下拉菜单取消选择期数:', periodValue, '当前选中:', this.selectedRentalPeriods);
			} else {
				this.selectedRentalPeriods.push(periodValue);
				console.log('下拉菜单选择期数:', periodValue, '当前选中:', this.selectedRentalPeriods);
			}
			// 不调用接口，等确定按钮点击时再调用
		},
		
		// 重置租期选择
		resetRentalPeriods() {
			this.selectedRentalPeriods = [];
			// 调用接口更新数据
			this.fetchRentalPlans();
		},
		
		// 确定租期选择
		confirmRentalPeriods() {
			this.showRentalPeriodDropdown = false;
			// 调用接口更新数据
			this.fetchRentalPlans();
			console.log('选中的租期:', this.selectedRentalPeriods);
		},
		
		// 获取租期显示文本
		getRentalPeriodText() {
			if (this.selectedRentalPeriods.length > 0) {
				return `租期(${this.selectedRentalPeriods.length})`;
			}
			return '租期';
		},
		
		// 切换月租下拉菜单显示状态
		toggleMonthlyRentDropdown() {
			// 先关闭所有其他下拉菜单
			this.closeAllDropdowns();
			
			// 然后切换当前下拉菜单
			this.showMonthlyRentDropdown = !this.showMonthlyRentDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showMonthlyRentDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 选择月租区间（单选）
		selectMonthlyRent(rentId) {
			this.selectedMonthlyRent = rentId;
			this.showMonthlyRentDropdown = false;
			// 调用接口
			this.fetchRentalPlans();
			console.log('选中的月租区间:', rentId);
		},
		
		// 获取月租显示文本
		getMonthlyRentText() {
			if (this.selectedMonthlyRent) {
				const rent = this.monthlyRentList.find(r => r.id === this.selectedMonthlyRent);
				return rent ? rent.name : '月租';
			}
			return '月租';
		},
		
		// 切换车龄下拉菜单显示状态
		toggleCarAgeDropdown() {
			// 先关闭所有其他下拉菜单
			this.closeAllDropdowns();
			
			// 然后切换当前下拉菜单
			this.showCarAgeDropdown = !this.showCarAgeDropdown;
			
			// 如果显示下拉菜单，检查是否需要滚动
			if (this.showCarAgeDropdown) {
				this.scrollToShowDropdown();
			}
		},
		
		// 选择/取消选择车龄区间（多选）
		toggleCarAge(ageId) {
			const index = this.selectedCarAges.indexOf(ageId);
			if (index > -1) {
				this.selectedCarAges.splice(index, 1);
			} else {
				this.selectedCarAges.push(ageId);
			}
			// 调用接口更新数据
			this.fetchRentalPlans();
		},
		
		// 下拉菜单中的车龄选择/取消选择方法（不立即调用接口）
		toggleCarAgeInDropdown(ageId) {
			const index = this.selectedCarAges.indexOf(ageId);
			if (index > -1) {
				this.selectedCarAges.splice(index, 1);
			} else {
				this.selectedCarAges.push(ageId);
			}
			// 不调用接口，等确定按钮点击时再调用
		},
		
		// 重置车龄选择
		resetCarAges() {
			this.selectedCarAges = [];
			// 调用接口更新数据
			this.fetchRentalPlans();
		},
		
		// 确定车龄选择
		confirmCarAges() {
			this.showCarAgeDropdown = false;
			// 调用接口更新数据
			this.fetchRentalPlans();
			console.log('选中的车龄区间:', this.selectedCarAges);
		},
		
		// 获取车龄显示文本
		getCarAgeText() {
			if (this.selectedCarAges.length > 0) {
				return `车龄(${this.selectedCarAges.length})`;
			}
			return '车龄';
		},
		
		// 统一的期数选中状态判断
		isPeriodSelected(periodValue) {
			const isSelected = this.selectedRentalPeriods.includes(periodValue);
			console.log('期数选中检查 - 期数:', periodValue, '是否选中:', isSelected, '当前选中列表:', this.selectedRentalPeriods);
			return isSelected;
		},
		
	}
}
</script>

<style scoped>
.car-rental-plan-container {
	min-height: 100vh;
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

/* 吸顶的车辆名称 */
.sticky-car-title {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sticky-car-title.sticky-fixed {
	opacity: 1;
	visibility: visible;
}

.sticky-header-fixed {
	position: fixed !important;
	top: 120rpx !important; /* 导航栏高度 */
	left: 0 !important;
	right: 0 !important;
	z-index: 200 !important;
	background-color: #fff !important;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
}

.banner-spacer {
	height: 100rpx;
}

.sticky-content {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
}

.car-title-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-left: 20rpx;
}

/* 背景图片区域 */
.banner-container {
	position: relative;
	height: auto;
	overflow: hidden;
}

.banner-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: blur(10rpx);
	transform: scale(1.1);
}

.banner-content {
	position: relative;
	z-index: 10;
	height: auto;
	display: flex;
	flex-direction: column;
}

/* 空白布局区域 */
.banner-spacer {
	height: 100rpx;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: transparent;
	margin: 0 20rpx;
}

.back-icon-wrapper {
	padding: 20rpx;
	margin: -20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	width: 40rpx;
	height: 40rpx;
}

.title-icon {
	width: 200rpx;
	height: 40rpx;
}

.tagline-icon {
	width: 180rpx;
	height: 30rpx;
}

/* 车辆信息卡片 */
.car-info-card {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 车辆基本信息 */
.car-basic-info {
	display: flex;
	margin-bottom: 30rpx;
}

.car-image-container {
	position: relative;
	width: 200rpx;
	height: 150rpx;
	margin-right: 30rpx;
}

.car-image {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

.image-indicator {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 20rpx;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
}

.car-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.car-brand-model {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.car-description {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.car-price {
	font-size: 32rpx;
	font-weight: bold;
	color: #ff6b35;
}

.car-price .unit {
	font-size: 24rpx;
	font-weight: normal;
}

/* 车辆规格参数 */
.car-specs {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 20rpx;
}

.spec-item {
	flex: 1;
	text-align: center;
	position: relative;
}

.spec-item-last {
	padding-left: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.spec-item-last::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 1rpx;
	background-color: #e0e0e0;
}

.spec-value {
	display: block;
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.spec-item-last .spec-value {
	margin-top: 8rpx;
	margin-bottom: 0;
}

.spec-label {
	display: block;
	font-size: 24rpx;
	color: #666;
}

/* 租车卡片区域 */
.car-cards-section {
	margin-top: 20rpx;
	border-radius: 20rpx 20rpx 0 0;
	padding: 0;
	flex: 1;
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
}

/* 标题区域（不吸顶） */
.section-header {
	position: relative;
	z-index: 10;
	background-color: transparent;
	padding: 30rpx 30rpx 0;
}

/* 吸顶筛选栏容器 */
.sticky-filter-container {
	position: relative;
	z-index: 10;
	background-color: transparent;
	padding: 0 30rpx;
}

.sticky-filter-fixed {
	position: fixed !important;
	top: 180rpx !important; /* 导航栏高度 */
	left: 0 !important;
	right: 0 !important;
	z-index: 200 !important;
	background-color: #fff !important;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
	padding: 20rpx 30rpx !important;
}

.sticky-filter-active {
	background-color: #fff !important;
	border-radius: 20rpx 20rpx 0 0 !important;
}

/* 吸顶占位元素 */
.sticky-filter-placeholder {
	height: 80rpx; /* 与筛选栏高度一致 */
	background-color: transparent;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: inline-block;
	position: relative;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(to right, #fff, #22c8b9);
}

/* 筛选栏 */
.filter-bar {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 20rpx;
	padding: 0 10rpx;
	gap: 40rpx;
}

.sticky-filter-fixed .filter-bar {
	margin-bottom: 15rpx;
	padding: 0;
}

.filter-item {
	display: flex;
	align-items: center;
	padding: 10rpx 0;
	position: relative;
}

.filter-text {
	font-size: 28rpx;
	color: #666;
	margin-right: 8rpx;
}

.filter-text.active-filter {
	color: #05d3b9;
}

.filter-arrow {
	font-size: 20rpx;
	color: #333;
}

/* 价格排序选项 */
.price-options {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin: 0 10rpx 20rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.price-options .price-option {
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	color: #333;
	text-align: center;
	background-color: #fff;
}

.price-options .price-option.active {
	color: #05d3b9 !important;
}

/* 租期选择选项 */
.rental-period-options {
	background-color: #fff;
	margin: 0 10rpx 20rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.rental-period-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx;
	gap: 8rpx;
}

.rental-period-item {
	width: calc(25% - 12rpx);
	height: 60rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	position: relative;
	background-color: #f2f3f7;
	margin-bottom: 15rpx;
	border: 2rpx solid #fff;
	box-sizing: border-box;
}

.rental-period-item.rental-period-empty {
	background-color: transparent;
	pointer-events: none;
}

.rental-period-item.rental-period-selected {
	background-color: #e8f8f5;
	border: 2rpx solid #05d3b9;
}

.rental-period-name {
	font-size: 24rpx;
	color: #333;
	flex: 1;
	text-align: center;
}

.rental-period-buttons {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
	justify-content: flex-start;
}

.rental-period-buttons .reset-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #fff;
	border: 2rpx solid #e0e0e0;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
	padding: 0 20rpx;
}

.rental-period-buttons .confirm-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #05d3b9;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #fff;
	padding: 0 20rpx;
}

/* 月租选择选项 */
.monthly-rent-options {
	background-color: #fff;
	margin: 0 10rpx 30rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.monthly-rent-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx;
	gap: 8rpx;
}

.monthly-rent-item {
	width: calc(50% - 4rpx);
	height: 60rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	position: relative;
	background-color: #f2f3f7;
	margin-bottom: 15rpx;
	border: 2rpx solid #fff;
	box-sizing: border-box;
}

.monthly-rent-item.monthly-rent-selected {
	background-color: #e8f8f5;
	border: 2rpx solid #05d3b9;
}

.monthly-rent-name {
	font-size: 24rpx;
	color: #333;
	flex: 1;
	text-align: center;
}

.monthly-rent-buttons {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
	justify-content: flex-start;
}

.monthly-rent-buttons .reset-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #fff;
	border: 2rpx solid #e0e0e0;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
	padding: 0 20rpx;
}

.monthly-rent-buttons .confirm-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #05d3b9;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #fff;
	padding: 0 20rpx;
}

/* 车龄选择选项 */
.car-age-options {
	background-color: #fff;
	margin: 0 10rpx 30rpx;
	overflow: hidden;
	position: relative;
	z-index: 210;
}

.car-age-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx;
	gap: 8rpx;
}

.car-age-item {
	width: calc(25% - 6rpx);
	height: 60rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	position: relative;
	background-color: #f2f3f7;
	margin-bottom: 15rpx;
	border: 2rpx solid #fff;
	box-sizing: border-box;
}

.car-age-item.car-age-selected {
	background-color: #e8f8f5;
	border: 2rpx solid #05d3b9;
}

.car-age-name {
	font-size: 24rpx;
	color: #333;
	flex: 1;
	text-align: center;
}

.car-age-buttons {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
	justify-content: flex-start;
}

.car-age-buttons .reset-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #fff;
	border: 2rpx solid #e0e0e0;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
	padding: 0 20rpx;
}

.car-age-buttons .confirm-btn {
	width: 250rpx;
	height: 80rpx;
	background-color: #05d3b9;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #fff;
	padding: 0 20rpx;
}

/* 租期选项标签 */
.rental-period-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	padding: 20rpx 30rpx 30rpx;
	position: relative;
}

.rental-period-tags-masked {
	position: relative;
}

.rental-period-tags-masked::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	pointer-events: auto;
}

.tag-item {
	background-color: #fff;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	padding: 12rpx 20rpx;
	font-size: 24rpx;
	color: #333;
	text-align: center;
	transition: all 0.3s ease;
}

.tag-item-selected {
	background-color: #e8f8f5;
	border: 2rpx solid #05d3b9;
	color: #05d3b9;
}

/* 租车方案卡片列表 */
.rental-cards-list {
	padding: 0 30rpx 200rpx;
	flex: 1;
	background-color: #f5f5f5;
}

/* 租车方案卡片列表遮罩效果 */
.rental-cards-masked {
	position: relative;
}

.rental-cards-masked::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	pointer-events: auto;
}

.rental-card {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 卡片头部 */
.card-header {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
}

.company-name {
	font-size: 28rpx;
	color: #333;
	margin: 0 20rpx;
}

.card-header .uni-icons:last-child {
	margin-left: 20rpx;
}

/* 内部价格卡片 */
.price-card {
	background-color: #f7f8fe;
	padding: 30rpx;
	margin: 20rpx;
	border-radius: 12rpx;
}

/* 价格信息区域 */
.price-info-section {
	margin-bottom: 20rpx;
}

/* 价格信息第一行 */
.price-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10rpx;
}

.price-item {
	flex: 1;
	text-align: center;
	position: relative;
}

.price-value {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.price-value.monthly-rent {
	color: #ff6b35;
}

.price-label {
	display: block;
	font-size: 24rpx;
	color: #666;
}

.price-sub-label {
	display: block;
	font-size: 20rpx;
	color: #999;
	margin-top: 4rpx;
}

/* 押金分期标签行 */
.deposit-tag-row {
	display: flex;
	justify-content: flex-start;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #e0e0e0;
	margin-bottom: 20rpx;
}

.deposit-tag {
	background-color: transparent;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	padding: 8rpx 16rpx;
	font-size: 22rpx;
	color: #666;
}

/* 免责声明 */
.disclaimer {
	display: block;
	font-size: 22rpx;
	color: #999;
	text-align: left;
	line-height: 1.4;
	margin-top: 20rpx;
}

/* 更多方案行 */
.more-plans-row {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;
	border-top: 1rpx solid #f0f0f0;
	margin-top: 20rpx;
}

.more-plans-text {
	font-size: 26rpx;
	color: #666;
	margin-right: 8rpx;
}

/* 优惠信息提示区域 */
.discount-info-container {
	position: fixed;
	bottom: 150rpx;
	left: 0;
	right: 0;
	background-color: transparent;
	padding: 0 30rpx 20rpx;
	z-index: 999;
}

.discount-info-content {
	background: linear-gradient(to right, #52688E, #4C5779);
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 4rpx 20rpx rgba(82, 104, 142, 0.3);
}

.discount-center {
	display: flex;
	align-items: center;
	flex: 1;
	margin: 0 20rpx;
}

.avatar-image {
	width: 100rpx;
	height: 100rpx;
	margin-right: 20rpx;
}

.discount-text {
	font-size: 28rpx;
	color: #fff;
}

.discount-button {
	background: linear-gradient(to right, #FF4500, #FF8727);
	border-radius: 50rpx;
	padding: 16rpx 30rpx;
}

.discount-button-text {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
}

/* 固定底部按钮区域 */
.bottom-button-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx 40rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 1000;
}

.consult-button {
	background: linear-gradient(to right, #52688E, #4C5779);
	border-radius: 50rpx;
	padding: 24rpx 0;
	text-align: center;
	box-shadow: 0 4rpx 15rpx rgba(82, 104, 142, 0.3);
}

.button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

/* 押金分期方案弹框 */
.deposit-plan-modal {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 0;
	position: relative;
	z-index: 2000;
}

/* 确保 uni-popup 在最上层 */
.uni-popup {
	z-index: 2000 !important;
}

.uni-popup__wrapper {
	z-index: 2000 !important;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 30rpx 20rpx;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.modal-content {
	padding: 30rpx;
}

.modal-subtitle {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.modal-description {
	display: block;
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 30rpx;
}

.payment-card {
	background-color: #f7f8fe;
	border-radius: 16rpx;
	padding: 30rpx;
	position: relative;
}

.background-line {
	position: absolute;
	left: 44rpx;
	top: 59rpx;
	bottom: 60rpx;
	width: 3rpx;
	background-color: #ccc;
	z-index: 1;
}

.payment-item {
	position: relative;
	z-index: 2;
}

.payment-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30rpx;
	height: 30rpx;
}


.connection-line {
	height: 20rpx;
	position: relative;
}

.connection-line::before {
	content: '';
	position: absolute;
	left: 16rpx;
	top: 0;
	width: 2rpx;
	height: 20rpx;
	background-color: #ccc;
}

.payment-label {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.payment-amount {
	font-size: 28rpx;
	font-weight: bold;
	color: #e66c1e;
}

.modal-footer {
	padding: 30rpx;
	background-color: #fff;
}

.modal-button {
	background: linear-gradient(to right, #52688E, #4C5779);
	border-radius: 10rpx;
	padding: 24rpx 0;
	text-align: center;
	box-shadow: 0 4rpx 15rpx rgba(82, 104, 142, 0.3);
}

.modal-button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

/* 咨询弹框样式 */
.consult-modal {
	background: linear-gradient(to right, #01DFAA, #13B09F);
	border-radius: 20rpx 20rpx 0 0;
	padding: 0;
	z-index: 2000;
}

.consult-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10rpx 30rpx 0rpx 30rpx;
}

.consult-info {
	flex: 1;
	margin-right: 20rpx;
	margin-top: 30rpx;
}

.consult-title {
	color: #015B49;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.service-features {
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.feature-icon {
	width: 24rpx;
	height: 24rpx;
}

.feature-text {
	color: #015B49;
	font-size: 28rpx;
}

.consult-avatar {
	width: 170rpx;
	height: 170rpx;
	flex-shrink: 0;
}

.consult-form-card {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
}

.phone-input-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	background-color: #f5f6fc;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
}

.input-label {
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
}

.input-wrapper {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: 20rpx;
}

.input-wrapper .uni-icons {
	padding: 10rpx;
	margin: -10rpx;
}

.phone-input {
	flex: 1;
	padding: 0;
	font-size: 28rpx;
	color: #333;
	background: transparent;
	border: none;
}

.privacy-text {
	color: #666;
	font-size: 24rpx;
	line-height: 1.5;
	margin-bottom: 10rpx;
}

.privacy-link {
	color: #01DFAA;
	text-decoration: underline;
}

.consult-submit-button {
	background: linear-gradient(to right, #01DFAA, #05D1BB);
	border-radius: 50rpx;
	padding: 24rpx 0;
	text-align: center;
	margin-top: 20rpx;
}

.submit-button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
}

/* 增加 uni-icons 的点击区域 */
.uni-icons {
	padding: 10rpx;
	margin: -10rpx;
	min-width: 40rpx;
	min-height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
